<template>
  <transition name="slide">
    <music-list :name="name"  :avatar="avatar" :songs="songs"></music-list>
  </transition>
</template>

<script type="text/ecmascript-6">
import MusicList from 'components/music-list/music-list'
import {getPlayList} from 'api/disc'
import {mapGetters} from 'vuex'
import {createSong} from 'common/js/song.js'
export default {
  components: {
    MusicList
  },
  data() {
    return {
      songs: []
    }
  },
  mounted() {
    if(this.$route.params.id) {
      let id = this.$route.params.id
      getPlayList(id).then(res => {
        this.songs = this.normalizeSongs(res.data.body.playlist.tracks)
        console.log(this.songs)
      })
    }
    console.log(this.avatar)
  },
  methods: {
    normalizeSongs(list) {
      let ret = []
      if(list) {
        list.forEach(item => {
           ret.push(createSong(item))
        })
      }
      return ret
    }
  },
  computed: {
    name() {
      return this.topList.name
    },
    avatar() {
      return this.topList.coverImgUrl
    },
    ...mapGetters([
      'topList'
    ])
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .slide-enter-active, .slide-leave-active
    transition: all 0.3s

  .slide-enter, .slide-leave-to
    transform: translate3d(100%, 0, 0)
</style>
